//右侧滑层
$rightHeadH:45px;
$rightFootH:58px;
$rightSiderW:60px;

.rightSlip{
  position: fixed;
  top:0;
  right:0;
  z-index: 999;
  width: calc(100% - 500px);
  height: 100%;
  min-width: 1000px;
  background: $bg_grey;
  @include box-shadow(0,0,10px,#ccc);
  &.animated{
    animation-duration:0.3s;
  }
  &.fadeOutRight{
    //@include opacity(0);
    visibility: hidden;
  }
  .rightSlipClose{
    background:$red;
    @include border-radius();
    width: 20px;
    @include hei(20px);
    text-align: center;
    display: inline-block;
    top: 12.5px;
    left:15px;
    z-index: 9;
    position: absolute;
    @include transition(All,0.4s,ease-in-out);
    i{
      color:#fff;
    }
    &:hover{
      @include css3(transform,rotate(90deg));
    }
  }
}
.container{
  padding: 20px;
}
.slip-slide{
  position: absolute;
  left:-$rightSiderW;
  top:$rightHeadH;
  @include transition(all,.3s);
  @include border-radius(5px 0 0 5px);
  max-height: calc(100vh - 45px - 58px);
  background: lighten($blue,5%);
  overflow-y: auto;
  ul{
    li{
      padding: 5px 0 5px 5px;
      width: 60px;
      a{
        padding: 10px;
        display: block;
        text-align: center;
        @include border-radius(5px 0 0 5px);
        span{
          width: 14px;
          display: block;
          margin: auto;
          color:#a7d8f9;
          line-height: 16px;
        }
      }
      &:hover{
        //background: darken($blue,5%);
        a{
          background:lighten($bg_grey,2%);
          span{
            color:$blue;
          }
        }
      }
      &.active{
        background: darken($blue,5%);
        a{
          background:lighten($bg_grey,2%);
          span{
            color:$blue;
          }
        }
      }
    }
  }
}
.slip-title{
  height: $rightHeadH;
  //@include box-shadow(0px,2px,10px,#ccc);
  .slip-base{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    @include hei($rightHeadH);
    @include clearfix;
    font-size: 12px;
    background: #fff;
    z-index: 1;
    border-bottom: 1px solid #f1f1f1;
    .slip-left{
      float: left;
      @include clearfix;
      h4,.id-state{
        float: left;
        margin-left: 15px;
      }
      h4{
        font-weight: bold;
        font-size: 18px;
        color:#333;
        margin-left: 50px;
        .h4-fomal{
          font-size: 12px;
          font-weight: normal;
          color:#666;
        }
      }
      .id-state-green{
        color:$green;
      }
    }
    .slip-right{
      float: right;
      ul{
        @include clearfix;
        li{
          float: left;
          margin-right: 20px;
          color:$grey;
        }
      }
    }
  }
}
.slip-body{
  position: absolute;
  top:$rightHeadH;
  bottom:$rightFootH;
  left:0;
  right:0;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  .steps{
    margin:15px 0 15px 15px;
    padding: 15px;
    background: #fff;
    @include border-radius();
    .ant-steps-title {

    }
    &-small{
      padding:0 20%;
    }
    &-middle{
      padding:0 10%;
    }
  }
}
.slip-cont {
  background: #fff;
  margin-bottom: 15px;
  margin-left: 15px;
  margin-top: 15px;
  @include border-radius();
  .slip-cont-title {
    padding: 15px;
    @include clearfix;
    border-bottom: 1px solid $borderColor;
    .slip-info {
      font-size: 12px;
    }
    .span-bdw {
      float: left;
      font-size: 16px;
      font-weight: bold;
      @include hei(28px);
      .num{
        color: $orange;
        padding: 0 5px;
        display: inline-block;
      }
    }
    .state-cont{
      float: left;
      @include clearfix;
      .state{
        float: left;
        margin-left: 8px;
        padding: 3px 8px;
        color:#fff;
        @include border-radius();
      }
    }
    .slip-bdt {
      float: right;
      .ant-btn{
        margin-left: 8px;
        &:first-child{
          margin-left: 0;
        }
      }
      .ant-btn-group{
        .ant-btn{
          margin-left: 0;
        }
      }
    }
  }
  .slip-cont-b {
    padding: 15px;
    .hetong{
      .name{
        display: block;
        color:$grey;
      }
    }
    .info-contact {
      display: inline;
      .phone-span {
        width: 24px;
        display: inline-block;
        @include border-radius();
        background: $green;
        text-align: center;
        margin-right: 10px;
        i {
          color: #fff;
          font-size: 16px;
        }
        &:last-child {
          margin-right: 0;
        }
        &.disabled{
          background: $bg_grey;
          i{
            color:#ccc;
          }
        }
      }
    }
    .info-cont {
      margin-top: -8px;
      margin-bottom: -8px;
      .span-left {
        color: $grey;
        min-width: 70px;
        display: inline-block;
        line-height: 32px;
        float: left;
      }
      .span-right{
        line-height: 32px;
        max-width: calc(100% - 70px);
      }
      .scale-map {
        margin-left: 10px;
      }
      div[class*="ant-col-"]{
        margin-top: 8px;
        margin-bottom: 8px;
      }
      ul{
        li{
          margin-top: 8px;
          margin-bottom: 8px;
          @include clearfix;
        }
      }
      .ant-input[type='text']{
      }
    }
    .fy{
      @include clearfix;
      .fy-half{
        float: left;
        width: 50%;
        text-align: center;
        padding: 30px 0;
        position: relative;
        &:first-child{
          &:after{
            content: '';
            position: absolute;
            width: 1px;
            height: calc(100% + 30px);
            top:-15px;
            right:1px;
            background: $borderColor;
          }
        }
        .num{
          font-size: 18px;
          color:$orange;
          font-weight: bold;
        }
        p{
          @include clearfix;
          margin-top: 5px;
          margin-bottom: 5px;
          span.left{
            display: inline-block;
            width:100px;
          }
          .ant-input{
            width: 120px;
          }
        }
        .half-btn-cont{
          margin-top: 10px;
          .btn-orange{
            padding: 0 25px; ;
          }
        }
      }
    }
    .ms-aunt-info{
      .border-top{
        padding:8px 0;
        &:first-child{
          border-top:none
        }
      }
      .tx{
        @include border-radius(100%);
        margin-right: 10px;
        display: block;
      }
      .base-info{
        .name,.age,.address{
          margin-right: 10px;
          @include textover;
          display: inline-block;
        }
        .name{
          width: 56px;
        }
        .age{
          width: 44px;
        }
        .address{

        }
      }
      div[class*="ant-col-"]{
        min-height: 48px;
        border-left:1px solid $borderColor;
        &:first-child{
          border-left:none;
        }
      }
      .checkbox-style{
        width: 100%;
        min-height: 48px;
        text-align: center;
      }
      .mianshi {
        text-align: center;
        .mianshi-cont {
          text-align: left;
          padding-left: 30px;
          display: inline-block;
          width: 50%;
          .num{
            font-weight: bold;
            font-size: 18px;
            color:$orange;
            padding-right: 5px;
          }
        }
        .mianshi-address{
          text-align: left;
          .map,.anticon-calendar{
            color:$blue;
            margin-right: 5px;
          }
          .map{
            cursor: pointer;
          }
          .time{
            padding-left: 20px;
            color:$grey;
          }
        }
        .mianshi-no{
          width: 100%;
        }
      }
      .mianshi-no{
        text-align: center;
        min-height: 48px;
        color:$grey;
      }
      .ms-sg-btn{
        .ant-btn{
          margin-right: 10px;
          margin-top: 5px;
          &:first-child{
            margin-top: 0;
          }
        }
      }
      .contact-mh{
        min-height:48px;
      }
      .mianshi-btn{
        margin-left: 15px;
      }
      .img-gz{
        position: absolute;
        right:10px;
        top:-5px;
        @include Animation(gaizhang,.3s);
      }
    }
    .ant-form-item{
      margin-bottom: 8px;
      .ant-form-item-label{
        padding-right: 15px;
      }
    }
  }
}
.slip-footer{
  position: absolute;
  bottom:0;
  left:0;
  right:0;
  z-index: 9;
  background: #fff;
  padding: 15px;
  height: $rightFootH;
  @include box-shadow(-2px,0,10px,#ccc);
  .slip-foot-center{
    text-align: center;
    .ant-btn{
      margin:0 10px;
    }
  }
  .slip-foot-right{
    position: absolute;
    right:15px;
    top:15px;
    .foot-right-link{
      margin-left: 10px;
      line-height: 32px;
    }
  }
}
//滑层没有底部
.rightSlip-nofoot{
  .slip-body{
    bottom:0;
  }
}
//滑层锚点
$AnchorHeight:95px;
.rightSlip-Anchor{
  .slip-title{
    height: $AnchorHeight;
  }
  .slip-body{
    top: $AnchorHeight;
  }
  .slip-scroll{
    @include clearfix;
    padding: 15px;
    position: absolute;
    top:45px;
    width: 100%;
    border-bottom: 1px solid #f7f7f7;
    background: #f1f1f1;
    z-index: 100;
    a{
      float: left;
      margin:0 8px;
      display: block;
      font-size: 14px;
      &:first-child{
        margin-left: 0;
      }
    }
  }
}
//证书
.zm-p{
  margin-top: 5px;
  .zm-em{
    @include border-radius(5px);
    @include hei(18px);
    padding: 0 5px;
    background:$bg_grey;
    font-size: 12px;
    display: inline-block;
    margin-left: 10px;
    color:$grey_darken;
    &:first-child{
      margin-left: 0;
    }
  }
}
//空状态
.empty{
  text-align: center;
  color:$grey_darken;
  padding: 30px 0;
  h4{
    font-size: 14px;
    margin-bottom: 10px;
    color:$grey;
    .empty{
      margin-right: 10px;
      font-size: 30px;
    }
  }
  p{
    font-size: 14px;
    .btn-link{
      padding-left: 5px;
      padding-right: 5px;
      text-decoration: underline;
    }
  }
}


// -----------------------------新增
.slip-cont-b {
  .ant-form-item-label {
    padding-right: 10px;
  }
}
.error-tip{
  line-height: 32px;
  color:$red;
  .anticon-minus-circle-o{
    margin-right: 5px;
    color:$red;
  }
}
.ant-form-item-label-empty{
 label{
   &:before,&:after{
     display: none;
   }
 }
}
.ant-input-suffix,.ant-input-suffix>i{
  color:rgba(0,0,0,.43);
}
//新增cont
.add-cont{
  div[class*="ant-col-"],.ant-col-auto{
    margin-top: 8px;
    margin-bottom: 8px;
  }
  div[class*="ant-col-"]{
    div[class*="ant-col-"],.ant-col-auto{
      margin-top: 0;
      margin-bottom: 0;
    }
  }
  .ant-col-auto{
    float: left;
    padding-left: 8px;
    padding-right: 8px;
    max-width: 79.16666667%;
  }
  .add-cont-link{
    line-height: 32px;
  }
  .danwei{
    padding-left: 0;
  }
  .checkbox-ul ul .checkbox-li{
    min-width: 120px;
  }
  &.add-cont-hetong{
    div[class*="ant-col-"]{
      div[class*="ant-col-"]{
        margin-top: 0;
      }
    }
  }
  .info-text{
    .ant-form-item-label,.ant-form-item-control,.span-left{
      line-height: 20px;
    }
  }
  .activity-cont{
    width: 100%;
    min-width: 800px;
    min-height: 400px;
    border:1px solid $borderColor;
    @include border-radius(5px);
  }
}
// -----------------------------详情
.gtjl-log-cont{
  padding-top: 20px;
  .name{
    margin-right: 8px;
  }
  .anticon-calendar{
    margin-right: 8px;
    color:$grey;
  }
  div[class*="ant-col-"]{
    margin: 5px 0;
  }
  div.ant-col-3{
    text-align: right;
  }
}
.right-info-pic,.right-info-vedio{
  .ant-upload-list {
   .anticon-delete{
     display: none;
   }
  }
  .ant-upload.ant-upload-select.ant-upload-select-picture-card{
    display: none;
  }
}
.right-info-vedio{
  .anticon-eye-o{
    &:before{
      content: "\E6D1" !important;
    }
  }
}
.border-bom-dashed{
  ul{
    li{
      border-bottom:1px dashed $borderColor;
      position: relative;
      padding-bottom: 8px;
      margin-bottom: 8px;
      .col-red{
        position: absolute;
        top:8px;
        right:8px;
        z-index: 9;
      }
    }
  }
}
//图片展示
.right-info-pic-info{
  .ant-upload-list{
    overflow: inherit;
  }
  .ant-upload-list-item{
    overflow: inherit;
  }
  .ant-upload-list-picture-card{
    min-height: 123px;
    float: left;
  }
  .ant-upload-list-picture-card .ant-upload-list-item-name{
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
  }
}
.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-play-circle-o{
  z-index: 10;
  transition: all .3s;
  cursor: pointer;
  font-size: 16px;
  width: 16px;
  color: rgba(255, 255, 255, 0.91);
  margin: 0 4px;
}
.video{
  width: 100%;
  height: 100%;
  min-width: 488px;
  min-height:275px;
}
//自定义视频上传
.ant-upload-select-picture-card{
  position: relative;
  .file-vedio{
    width: 94px;
    height: 94px;
    position: absolute;
    @include opacity(0);
    top:0;
    left:0;
    right:0;
    bottom:0;
    text-indent: -9999px;
  }
}
.ant-upload-select {
  .anticon-play-circle-o {
    z-index: 10;
    transition: all .3s;
    cursor: pointer;
    font-size: 16px;
    width: 16px;
    color: rgba(255, 255, 255, 0.91);
    margin: 0 4px;
  }
  .jdt-bg{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: rgba(0, 0, 0, 0.6);
    @include border-radius(4px);
    z-index: 9;
  }
  .ant-progress{
    line-height: normal;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width: 40px;
    height: 40px;
    margin: auto;
    color:#fff;
  }
}
.ant-upload-list-item-jdt{
  .ant-upload-list-item-info:before{
    display: none;
  }
}
.slip-cont-steps{
  padding:32px 0;
}
//收取费用
.collect-fees{
  text-align: center;
  padding: 32px 0;
  p{
    font-size: 18px;
    .num{
      font-weight: bold;
      padding:0 3px;
      color:$orange;
    }
  }
  .collect-fees-btn{
    margin-top: 16px;
  }
}
.state-finished{
  font-size: 16px;
  color:$green;
  display: inline-flex;
  align-items: center;
  .MyIcon.finished{
    color:$green;
    font-size: 32px;
  }

}
.btn-hover{
  position: relative;
  display: inline-block;
  .btn-hover-cont{
    position: absolute;top:0;left:0;right:0;bottom:0;z-index: 99;
    background: rgba(0,0,0,.8);
    text-align: center;
    justify-content: center;
    align-items: center;
    @include border-radius(4px);
    .btn-hover-link{
      margin:0 5px;
      color:#fff;
    }
    display: none;
  }
  &:hover{
    .btn-hover-cont{
      display: flex;
    }
  }
}
.caozuo-cont{
  .ant-btn{
    margin-right: 8px;
    margin-top: 2px;
  }
}
.btn-add-title{
  padding: 8px;
  font-size: 14px;
  border-bottom: 1px solid $borderColor;
  margin-bottom: 16px;
  text-align: center;
}
.btn-add-cont{
  margin: -8px;
  .btn-hover {
    margin: 8px;
    .ant-btn-primary {
      min-width: 68px;
    }
  }
  .ant-btn-info,.ant-btn-delete{
    margin: 8px;
  }
}


//测评
.slip-cp-title,.slip-cp-result{
  text-align: center;
}
.slip-cp-title{
  font-size: 24px;
  font-weight: bold;
  padding:16px;
}
.slip-cp-result{
  padding: 8px;
  margin-bottom: 8px;
}
.table-chooiced{
  padding:0 5px;
  display: inline-block;
  background: $blue;
  color:#fff;
  @include border-radius(2px);
}
.table-top-title{
  padding: 16px;
  text-align: center;
  font-size: 16px;
}
.table-bottom-title{
  padding: 8px;
  text-align: left;
  border:1px solid #e9e9e9;
  border-top:none;
}
.shejia-address{
  position: relative;
  display: flex;
  justify-content:flex-end;
  .shejia-address-left{
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10%;
  }
  .add-cont{
    width: 90%;
    div[class*=ant-col-]{
      margin:8px 0 !important;
    }
  }
  .ant-input-group-addon:first-child{
    width: 75px;
  }
}
.good-child-cont{
  margin-bottom: 16px;
}

//index
.index{
  .banner{
    ul{
      li{
        img{
          width: 100%;
          @include border-radius();
        }
      }
    }
  }
  .ant-card{
    margin-top: 16px;
  }
  .main-ul{
    height: 205px;
    overflow-y: auto;
    ul{
      li{
        padding:8px 0;
        a{
          display: block;
          .left{
            float: left;
            color:#666;
            max-width: calc(100% - 100px);
            @include textover();
            .MyIcon{
              color:$blue;
              margin-right: 5px;
            }
          }
          .right{
            float: right;
          }
          .left,.right{
            display: block;
          }
        }
      }
    }
  }
  .contact{
    font-size: 14px;
    h3{
      font-size: 18px;
      margin-bottom: 16px;
      font-weight: normal;
    }
    .icon-span{
      margin-right: 16px;
      color:$blue;
      display: inline-block;
      .MyIcon{
        font-size: 36px;
      }
    }
    .contact-li{
      padding:8px 0;
      display: flex;
      align-items: center;
    }
  }
}